<template>
	<div>
		<div class="actions">
			<a-button type="primary" @click="visible=true" style="margin-right:20px"><a-icon type="plus-circle" />新增</a-button>
			<a-button type="danger" @click="multiDel"><a-icon type="delete" />删除</a-button>
		</div>

		<div class="table-wrap">
			<a-table 
			:columns="columns" 
			:data-source="list" 
			:rowKey="record=>record.id" 
			:pagination="pageSetting"	
			:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
			@change="tableChange">
				<template slot="goods_name" slot-scope="text,item">
				<a target="_blank" rel="noopener noreferrer" :href="item.ticket_short_link">{{ text }}</a>
				</template>
				<template slot="img_url" slot-scope="text">
					<img :src="text" style="height:40px" alt="" @click="preview_url=text;visible=true;" />
				</template>
				<template slot="last_price" slot-scope="text,record">
					{{(record.price-record.ticket_price).toFixed(2)}}
				</template>
				<span slot="ticket_end_time" slot-scope="text,item" :class="{outDate:isOutDate(item.ticket_end_time)}">{{text}}</span>
				<template slot="operation" slot-scope="text,item">
					<a-button type="link" color="#f00" @click="del(item.id)">删除</a-button>
				</template>
			</a-table>
		</div>

		<a-modal
		title="Title"
		:visible="visible"
		:confirm-loading="confirmLoading"
		@cancel="handleCancel"
		:footer="null"
		width="800px"
		>
			<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
				<a-form-model-item label="Activity name">
					<a-input v-model="form.name" />
				</a-form-model-item>
				
				<a-form-model-item label="Activity form">
					<a-input v-model="form.desc" type="textarea" />
				</a-form-model-item>
				<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
					<a-button type="primary" @click="onSubmit">
					Create
					</a-button>
					<a-button style="margin-left: 10px;">
					Cancel
					</a-button>
				</a-form-model-item>
			</a-form-model>
		</a-modal>
	</div>
</template>
<script>
import { messageTips } from '../../until/tools.js';
const columns = [
	{
		title: '商品',
		dataIndex: 'goods_name',
		key: 'goods_name',
		scopedSlots: { customRender: 'goods_name' },
	},
	{
		title: '价格',
		dataIndex: 'price',
		key: 'price',
		width: 80,
		align:'right'
	},
	{
		title: '优惠券值',
		dataIndex: 'ticket_price',
		key: 'ticket_price',
		width: 100,
		align:'right'
	},
	{
		title: '券后价',
		dataIndex: 'last_price',
		key: 'last_price',
		width: 80,
		scopedSlots: { customRender: 'last_price' },
		align:'right'
	},
	{
		title: '佣金',
		dataIndex: 'commission',
		key: 'commission',
		width: 80,
		scopedSlots: { customRender: 'commission' },
		align:'right'
	},
	{
		title: '有效期',
		dataIndex: 'ticket_end_time',
		key: 'ticket_end_time',
		width: 200,
		scopedSlots: { customRender: 'ticket_end_time' },
	},
	{
		title: '图片',
		dataIndex: 'img_url',
		key: 'img_url',
		scopedSlots: { customRender: 'img_url' },
	},
	{
		title: '操作',
		dataIndex: 'operation',
		key: 'operation',
		scopedSlots: { customRender: 'operation' },
	}
];
export default {
	data() {
		return {
			labelCol: { span: 4 },
			wrapperCol: { span: 14 },
			form: {
				name: '',
				region: undefined,
				date1: undefined,
				delivery: false,
				type: [],
				resource: '',
				desc: '',
			},
			visible:false,
			confirmLoading:false,
			columns,
			list:[],
			
			pageCount:0,
			currentPage:1,
			selectedRowKeys:[]
		};
	},
	computed:{
		pageSetting(){
			let pageSize=0;
			if(this.pageCount) {
				pageSize = this.pageCount;
			}
			return {
				showQuickJumper:true,
				hideOnSinglePage:true,
				showTotal:()=>`共${pageSize}条`,
				total:pageSize,
			}
		},
	},
	methods: {
		handleCancel() {},
		onSelectChange(selectedRowKeys) {
			this.selectedRowKeys = selectedRowKeys;
			//this.exportHtml='';
		},
		onSubmit() {
			console.log('submit!', this.form);
			messageTips('做了',3);
		},
		tableChange(e) {
			this.getList(e.current);
		},
		multiDel() {

		}
	},
};
</script>